<!--
 * @Description: 销售统计
 * @Author: zzj
 * @Date: 2021-10-26 19:25:31
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-29 10:05:05
-->
<template>
	<div class="statistics_sales">
		<div ref="root"></div>
	</div>
</template>
<script>

import { DualAxes } from '@antv/g2plot';
import {get} from "@/utils/request"
export default {
	data(){
		return {

		}
	},
	mounted(){
		this.initChart();
	},
	methods:{
		async initChart(){
			let container = this.$refs.root;

			let url = "/statistics/dayOrder";
			let resp = await get(url);
			const data = resp.data;

			const dualAxes = new DualAxes(container, {
				data: [data, data],
				xField: 'day',
				yField: ['num', 'total'],
				yAxis: {
					// 格式化左坐标轴
					value: {
						min: 0,
						label: {
							formatter: (val) => `${val}个`,
						},
					},
					// 隐藏右坐标轴
					count: false,
				},
				geometryOptions: [
					{
						geometry: 'column',
						color: '#5B8FF9',
						columnWidthRatio: 0.1,
						label: {
							position: 'middle',
						},
					},
					{
						geometry: 'line',
						smooth: true,
						color: '#5AD8A6',
					},
				],
				// 更改柱线交互，默认为 [{type: 'active-region'}]
				interactions: [
					{
						type: 'element-highlight',
					},
					{
						type: 'active-region',
					},
				],
				annotations: {
					value: [
						{
							type: 'text',
							position: ['2019-06', 'max'],
							content: '柱线混合图',
						},
					],
					count: [
						{
							type: 'dataMarker',
							top: true,
							position: ['2019-05', 400],
							line: {
								length: 20,
							},
							text: {
								content: '2019-05, 发布新版本',
								style: {
									textAlign: 'left',
								},
							},
						},
					],
				},
			});

			dualAxes.render();
		}
	}
}
</script>
<style lang="scss" scoped>

</style>